<template>
  

    <router-link to="/user">
      <van-cell center title="<    订单列表" icon="icon-fanhui" style="font-size: 18px; font-family:'小黑';" />
    </router-link>

    
    <van-grid  v-model:active="activeName" class="orders">
  <van-grid-item  text="全部" to="/list?id=0"  name="a" class="grid"/>
      <van-grid-item  text="待支付" to="/payfor?id=1" name="b" class="grid"/>
      <van-grid-item  text="待收货" to="/receipt?id=2" name="c" class="grid"/>
      <van-grid-item  text="待自提" to="/pickup?id=3" name="d" class="grid"/>
    </van-grid>


    <!-- <van-tabs v-model:active="activeName" class="orders" title-active-color="green" line-width="40px">
      <van-tab title="全部" name="a"></van-tab>
      <router-link to="/payfor"><van-tab title="待支付" name="b"></van-tab></router-link>
      <van-tab title="待收货" name="c"></van-tab>
      <van-tab title="待自提" name="d"></van-tab>
    </van-tabs> -->
 
    <div class="liss" v-for="item in product" >
      
    
    <div class="addres">🦌 {{item.address_book}} {{ item.detail }} </div><hr>
    <div class="stas">
  {{ item.status }}
  <template v-if="item.status === '待支付'">
    ，剩余
    <van-count-down :time="time" style="margin-left: 85px;margin-top:-15px; color:red;"/>
  </template>
  <template v-else>
    <span></span>
  </template>
</div>
    <div   class="orde">下单时间:  {{ item.order_time }} </div>
   
    <div  class="amou"> 总价: ￥{{ item.amount }}</div>
   
    <van-button type="success" to="/Order" size="small" id="mored">再来一单</van-button>
    
    
    </div>

    <div class="image"></div>
    <div class="image1"></div>
    <div class="image2"></div>
    <div class="image3"></div>
    <div class="image4"></div>

    
  
</template>
  
<script setup>
import { ref, onMounted } from 'vue';
import axios from '../utils/axios.js'
onMounted(()=>{
  axios.get('inquire_order').then(res=>{
    console.log(res.data);
    product.value = res.data
    product.value.map((item)=>{
      if(item.status == 1){
        item.status = '待支付'
      }
      else if(item.status == 2){
        item.status = '待派送'
 }    
      else if(item.status == 3){
        item.status = '已派送'
 }    
      else if(item.status == 4){
        item.status = '已完成'
 }    
      else if(item.status == 5){
        item.status = '已取消'
 }      
      else  if(item.status == 6)  
        item.status = '待自提'
      
      if(item.pay_method == 1){
        item.pay_method = '微信'
      }else{
        item.pay_method = '支付宝'
      }
      
      
    })
    console.log(product.value);
  })
})
  
const time = ref(1* 15 * 60 * 1000);


const product = ref([
  { id: 1, number: 1, status: '待支付', address_book: 'A公司', order_time: '20:00:00', checkout_time: '20:00:00', pay_method: '支付宝', amount: 11.00, remark: '多加辣椒',detail:'111' },
  { id: 2, number: 1, status: '待支付', address_book: 'A公司', order_time: '20:00:00', checkout_time: '20:00:00', pay_method: '支付宝', amount: 11.00, remark: '多加辣椒',detail:'111' },
  { id: 3, number: 1, status: '待支付', address_book: 'A公司', order_time: '20:00:00', checkout_time: '20:00:00', pay_method: '支付宝', amount: 11.00, remark: '多加辣椒',detail:'111' }
])
const activeName = ref('a');


// 
</script>
  
<style>

.liss{
margin-left:10px;
margin-top: 10px;
background-color: white;
margin-right: 10px;
border-radius: 10px;
padding: 5px;
height:140px
}

.addres{
  padding:10px;
  font-size: 15px;
  border-bottom:#C8C9CC;
 
}
.orde{
 
  font-size: 13px;
  font-family: '小宋';
  color:dimgray ;
  margin-left: 65px;
  margin-top: 30px;
}
.amou{
 
  font-size: 13px;
  font-family: '小宋';
  color:dimgray ;
  margin-left: 65px;
  margin-top: 20px;

}
.stas{
  position: relative;
  font-size: 13px;
  color:#96999C;
  margin-left: 205px;
  margin-top: -38px;
  
 
}
#mored{
  margin-left: 270px;
  color:black;
}
.image{
  
  width:45px;
  height:45px;
  background-color:black;
  margin-top: -85px;
  margin-left: 20px;
  background:url(https://tse4-mm.cn.bing.net/th/id/OIP-C.GJ0EWSzJeEdXthF8hdmLPAHaE-?w=274&h=185&c=7&r=0&o=5&dpr=1.9&pid=1.7) 40px,40px;
 
}

.image1{
  
  width:45px;
  height:45px;
  background-color:black;
  margin-top: -210px;
  margin-left: 20px;
  background:url(https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00419-3641.jpg) 40px,40px;

  
}

.image2{
  
  width:45px;
  height:45px;
  background-color:black;
  margin-top: -200px;
  margin-left: 20px;
  background:url(https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00578-1005.jpg) 40px,40px;

  
}
.image3{
  
  width:45px;
  height:45px;
  background-color:black;
  margin-top: -205px;
  margin-left: 20px;
  background:url(https://tse1-mm.cn.bing.net/th/id/OIP-C.17TtfoBPMOwYTNWzT6BjZwHaFj?w=265&h=199&c=7&r=0&o=5&dpr=1.9&pid=1.7) 40px,40px;

  
}.image4{
  
  width:45px;
  height:45px;
  background-color:black;
  margin-top: -205px;
  margin-left: 20px;
  background:url(https://tse1-mm.cn.bing.net/th/id/OIP-C.jJyz36FLjRoTjOW_RSZVOAHaEQ?w=297&h=180&c=7&r=0&o=5&dpr=1.9&pid=1.7) 40px,40px;

  
}
.van-grid-item__text {
  font-size: 16px;
  cursor: pointer;
  
  
  
}
.van-grid-item__text:hover{
  color: green;

}
.van-grid-item__text:active{
  color: green;

}




</style>